<template>
  <button v-on:click="sendMessage" :disabled="issend" :class="{uncur:issend}">{{over_time}}{{sendText}}</button>
</template>

<script>
  //import {getCode} from "/@/api/user"
  //import { ElMessage } from 'element-plus'
  import { useLoginStore } from '/@/store'
  const loginStore = useLoginStore();

  export default{
      name: "sendCode",
    props:{
      phone:String,
    },
    data(){
      return {
        issend: false,
        sendText: "验证码",
        over_time:"",
        countDown:60,
        disabled:"disabled",
        undisabled:undefined,

        id:null
      }
    },
    destroyed(){
      if(this.id)
        clearInterval(this.id )
    },
    methods:{
 
      sendMessage: function () {
        if(!this.phone){
          return this.$message(
            {
              message: '请输入手机号码',
              type: 'error',
              showClose: true,
              //duration: 3000,
              center: true,
              grouping: true,
            }
          )
        };
        loginStore.getVerifyCode(this.phone).then(res=>{
          this.sendCodeSuccess(res);
        }).catch(err=>{
          console.log(err);
        })
      },
    
      overtime: function () {
        if (this.over_time > 0) {
          this.over_time--;
        }
        else{
          clearInterval(this.id);
          this.sendText = "验证码";
          this.over_time = "";
          this.issend =  false;
        }
      },
      sendCodeSuccess: function () { // 短信发送成功
        if(this.id){
          clearInterval(this.id );
        }
        this.over_time = this.countDown;
        this.sendText ="秒";
        this.issend =  true;
        this.id= setInterval(() => {
          this.overtime()
        }, 1000)
      },
    }
  }
</script>

<style lang="scss" scoped>
  .sendCode {
    width: 100%;
    height: 100%;
  }
  button{
    cursor: pointer;
    text-align: center;
  }

</style>
